<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <a-tabs default-active-key="1">
        <!-- <a-tab-pane key="1">
          <span slot="tab" class="tab-box">
            <a-icon type="home" class="icon" style="color: coral;font-size: 18px" />
            <span>{{ $ct("systemConfigIndex", "基础配置") }}</span>
          </span>
          <basics-config ref="BasicsConfig" />
        </a-tab-pane> -->
        <a-tab-pane key="1">
          <span slot="tab" class="tab-box">
            <a-icon type="login" class="icon" style="color: coral;font-size: 18px" />
            <span>登录界面</span>
          </span>
          <LoginConfig></LoginConfig>
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab" class="tab-box">
            <a-icon type="desktop" class="icon" style="color: coral;font-size: 18px" />
            <span>系统界面</span>
          </span>
          <homePageConfig></homePageConfig>
        </a-tab-pane>
        <!-- <a-tab-pane key="3">
          <span slot="tab" class="tab-box">
            <a-icon type="safety-certificate" class="icon" style="color: coral;" />
            <span>{{ $ct("securityConfig", "安全配置") }}</span>
          </span>
          <securityConfig ref="securityConfig" />
        </a-tab-pane> -->
        <!-- <a-tab-pane key="4">
          <span slot="tab" class="tab-box">
            <a-icon type="usergroup-add" class="icon" style="color: coral;" />
            <span>{{ $ct("administratorConfig", "管理员配置") }}</span>
          </span>
          <administratorConfig ref="BasicsConfig" />
        </a-tab-pane> -->
        <a-tab-pane key="5">
          <span slot="tab" class="tab-box">
            <a-icon type="setting" class="icon" style="color: coral;" />
            <span>{{ $ct("otherConfig", "其他配置") }}</span>
          </span>
          <others-config></others-config>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import {
  appTab,
  dingdingTab,
  fileUploadTab,
  BasicsConfig,
  mailTab,
  messageTab,
  otherTab,
  weixinTab,
  othersConfig,
  administratorConfig,
  securityConfig,
  LoginConfig,
  homePageConfig
} from "./tab";


export default {
  name: "TableList",
  components: {
    BasicsConfig,
    fileUploadTab,
    messageTab,
    mailTab,
    dingdingTab,
    weixinTab,
    appTab,
    otherTab,
    othersConfig,
    administratorConfig,
    securityConfig,
    LoginConfig,
    homePageConfig
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped lang="less">
.page-common-content {
  padding: 0;
}

/deep/ .ant-card-head {
  min-height: 32px !important;
  background: #ff4400a3;
}

/deep/ .ant-card-head-wrapper {
  height: 32px !important;
  line-height: 32px !important;
}

/deep/ .ant-card-head-title {
  height: 32px !important;
  line-height: 32px !important;
  font-size: 14px !important;
  color: #fff !important;
}

/deep/ .ant-tabs-nav-wrap {}

.tab-box {
  font-size: 14px;
  margin: 0 10px;
  text-align: center;
  display: flex;
  align-items: center;
}

.icon {
  // display: block !important;
  font-size: 20px !important;
  // padding: 10px 0 5px 8px;
  text-align: center;
}

.ant-card {
  height: auto !important;
}

.ant-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ant-tabs .ant-tabs-top-content.ant-tabs-content-animated {
  flex: 1;
}

.page-common-layout .page-common-content .ant-tabs-content .ant-tabs-tabpane {
  height: 100%;
  overflow-y: auto
}
</style>
